<template>
	<view class="bind">
		<view class="title">
			绑定员工:
		</view>
		<view class="info">
			<view class="name">
				{{employee.employee_name}}
			</view>
		</view>
		<u-button type="primary" :text="getBtnText" :disabled="hasBind" @click="handleBind"></u-button>
	</view>
</template>

<script>
	import * as Api from '@/api/employee.js'
	export default {
		data() {
			return {
				employeeId: 0,
				employee: {
					employee_name: ''
				},
				hasBind: false
			};
		},
		computed: {
			getBtnText() {
				return this.hasBind ? '该员工已被绑定': '确认绑定'
			}
		},
		onLoad(query) {
			// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
			const scene = decodeURIComponent(query.scene)
			const employeeId = scene.split('=')[1]
			console.log(employeeId)
			this.employeeId = Number(employeeId)
			// 获取该员工信息
			this.getEmployeeInfo()
		},
		methods: {
			getEmployeeInfo() {
				Api.detail({
					params: {
						employeeId: this.employeeId
					}
				}).then(res => {
					console.log(res)
					this.employee = res.employee
					if(res.employee.user_id > 0) {
						this.hasBind = true
					}
				})
			},

			handleBind() {
				wx.getUserProfile({
					desc: '用于完善用户资料',
					success: (profile) => {
						console.log(profile)
						wx.login({
							success: (res) => {
								Api.binding({
									employeeId: this.employeeId,
									form: {
										"isParty": true,
										"partyData": {
											"userInfo": profile.userInfo,
											"oauth": "MP-WEIXIN",
											"code": res.code,
										}
									}
								}).then(res => {
									console.log(res)
									// 绑定成功
									uni.showModal({
										title: '绑定成功',
										showCancel: false,
										success: res => {
											if (res.confirm) {
												// uni.redirectTo({
												// 	url: '/pages/index/index'
												// })
											}
										}
									});
								})
							}
						})

					}
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.bind {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 600rpx;
		margin: 0 auto;
		margin-top: 200rpx;

		.title {
			color: #333;
			font-size: 22px;
			margin-bottom: 30rpx;
		}

		.info {
			color: #333;
			font-size: 16px;
			margin-bottom: 150rpx;
		}
	}
</style>
